<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
</head>
<body>
<button id="btn1">按钮1</button>

<div id="div1" style="width: 100px;height: 100px"></div>
<script type="text/javascript">
    window.onload = function () {
        //定义一个变量 i
        var i = 0;
        //所有的元素事件绑定 都要写在 window.onload 中
        document.getElementById("btn1").onclick = function () {
            console.log("按钮1被点击！");
            //让 div1 背景颜色改变
            //在 JS 当中 所有属性都可以通过.调用
            var color;
            switch (i % 3) {
                case 0:
                    color = 'red';
                    break;
                case 1:
                    color = 'yellow';
                    break;
                case 2:
                    color = 'blue';
                    break;
            }
            document.getElementById("div1").style.backgroundColor = color;
            i++;
        }
    };


</script>
</body>
</html>